<template>
    <avue-login  ref="avueLogin" :option="loginOption" @refresh="refreshCode" :codesrc="codesrc" @submit="submit">
    </avue-login>
</template>

<script>
    import {mapGetters} from "vuex";

    export default {
        name: "userlogin",
        data() {
            return {
                loginForm: {},
                codesrc: '',
                loginOption: {
                    width: 350,
                    codeType: 'img',
                    column: {
                        username: {
                            label: '用户名',
                            placeholder: '用户名',
                            autocomplete: 'off',
                            rules: [
                                {required: true, message: '请输入用户名', trigger: 'blur'}, {
                                    min: 2,
                                    message: "用户名长度最少为2位",
                                    trigger: "blur"
                                }
                            ]
                        },
                        password: {
                            label: '密码',
                            autocomplete: 'off',
                            rules: [{required: true, message: '请输入密码', trigger: 'blur'}, {
                                min: 4,
                                message: "密码长度最少为4位",
                                trigger: "blur"
                            }]
                        },
                        code: {
                            label: '验证码',
                            tip: '点击图片可以刷新验证码',
                            autocomplete: 'off',
                            rules: [{required: true, message: '请输验证码', trigger: 'blur'}, {
                                min: 4,
                                max: 4,
                                message: "验证码长度为4位",
                                trigger: "blur"
                            },]
                        }
                    }
                },
            };
        },
        created() {
            this.refreshCode();
        },
        mounted() {
        },
        computed: {
            ...mapGetters(["tagWel"])
        },
        props: [],
        methods: {
            refreshCode() {
                this.codesrc = this.codeUrl + '?randomStr=' + new Date().getTime();
            },
            submit(form) {
                this.$store.dispatch("LoginByUsername", form).then(() => {
                    this.$router.push({path: this.tagWel.value});
                });
                setTimeout(()=>{
                    this.refreshCode();
                })

                /*this.$refs.avueLogin.form.code = '';
                this.$refs.avueLogin.column.code.focus();
                console.log('avueLogin', this.$refs.avueLogin);*/
                /*this.$refs.loginForm.validate(valid => {
                    if (valid) {
                        /!*this.refreshCode();
                        this.$refs.codeInput.focus();*!/
                    }
                });*/
            },
        }
    };
</script>

<style>
</style>
